<template>
  <div class="dialogBox" :title="title" :confirmBtn = 'confirmBtn'>
    <div class="cover" v-show="showCover"></div>
    <transition name="slide">
      <div class="window" v-show="show">
        <span class="toastText" v-html="reminderInfo">
<!--          {{reminderInfo}}-->
        </span>
        <div v-html="content"></div>
        <div class="setting">
          <button class="cancel" @click.stop="hide">取消</button>
          <button class="yellowbtn sure" @click.stop="callback">{{submitTxt}}</button>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
  export default {
    name: "DiaLogTwo",
    data(){
      return{
        introduce:'会话弹窗2',
        show:false,
        showCover:false,
        reminderInfo:'',
        timeout:'',//定时器
        submitTxt : '',
        content : '',
      }
    },
    props: {
      'title': {
        /*组件中配置的提示文字*/
        type: String,
        default: '提示文字'
      },
      reminderContent : {
        /*提示内容*/
        type: String,
        default: ' '
      },
      'confirmBtn':{
        /*确定按钮文字*/
        type: String,
        default: '确定'
      }
    },
    mounted() {
      this.reminderInfo = this.title ? this.title  : '提示文字';
      this.submitTxt = this.confirmBtn ? this.confirmBtn  : '确定';
      this.content = this.reminderContent ? this.reminderContent : ' ';
      this.$emit('success');
    },
    methods:{
      changeToast(mes){
        //动态改变提示标题
        if( mes ){
          this.reminderInfo = mes;
        }
      },
      changeContent( html ){
        //动态改变提示内容
        if( html ){
          this.content = html;
        }
      },
      callback(){
        /*点击确定*/
        this.hide();
        this.$emit('confirm'); /*组件调用方法： @confirm='function'*/
      },
      hide(){
        /*隐藏弹窗*/
        let thiz = this;
        this.$emit('cancel'); /*组件调用方法： @cancel='function'*/
        this.show = false;
        thiz.timeout = setTimeout(function () {
          thiz.showCover = false;
          clearTimeout(thiz.timeout);
          thiz.timeout = null;
        },200);
        // thiz.canScroll();/*关闭弹窗，让页面可以上下移动*/
      },
      dialogShow(){
        /*显示弹窗*/
        this.show = true;
        this.showCover = true;
        //this.noScroll();/*显示弹窗，让页面无法上下移动*/
      }
    },
    destroyed() {
      this.hide();
      let thiz = this;
      clearTimeout(thiz.timeout);
      thiz.timeout = null;
    }
  }
</script>

<style type="text/less" lang="less" scoped>
  .window{
    padding:0.52rem;padding-top:0.43rem;padding-bottom: 1.4rem;width: calc( 100% - 1.5rem );height:auto;position: fixed;
    top:50%;left: 0.75rem;background: #fff;border-radius: 0.1rem;overflow: hidden;z-index: 6;
    .warnIcon{
      text-align: center;
      >img{
        width: 0.7rem;height: 0.7rem;border-radius: 50%;overflow: hidden;}
    }
    .toastText{text-align: center;font-size: 0.32rem;display: block;line-height: 100%;padding-bottom: 0.36rem;font-family: 'PingFang-SC-Bold'}
    .setting{
      text-align: center;width:100%;background: #fff;position: absolute;z-index: 1;bottom: 0;left:0;overflow: hidden;border-top: 0.015rem solid#EAEAEA;
      button{
        margin: 0;font-size: 0.3rem;padding:0.16rem 0.62rem;display: inline-block;line-height: 100%;
        box-sizing: border-box;width: 50%;float: left;height: 0.87rem;border-radius: 0;border: 0;
      }
      .cancel {
        background: #fff;color: #636363;
      }
    }
    .closeWindow{
      width: 0.70rem;height: 0.70rem;padding: 0.22rem;position: absolute;right: 0;top:0;background: none;
      img{width: 0.26rem;height: 0.26rem}
    }
  }
  /*动画*/
  .window{
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;-webkit-transform: translateY(-50%);transform: translateY(-50%);
  }
  @media screen and (min-width: 1025px) {
    .window{width:  424px;left: 50%;margin-left:-212px;}
  }
</style>
